<!-- cwj 的消息页面 -->
<script setup>
import FooterCom from '@/components/FooterCom.vue'
import { reactive } from 'vue'
import { getMesListFn } from '@/api/mesapi'
const state = reactive({
    mesList: []
})
getMesListFn().then(res => {
    // console.log(res)
    state.mesList = res.data.messages
    console.log(state.mesList);
})
</script>
<template>
    <div class="mes-box">
        <header>
            <span></span>
            <p>消息</p>
            <van-icon name="ellipsis" @click="$router.push('/set')" />
        </header>
        <ul class="mes-nav">
            <li>
                <!-- 会话消息提示 -->
                <van-icon name="chat-o" size="26" tag="回复我的" />
                <span>回复我的</span>
            </li>
            <li>
                <!-- 被@的消息提示 -->
                <van-icon size="26"
                    name="https://cdn7.axureshop.com/demo2024/1966126/images/%E6%B6%88%E6%81%AF%E4%B8%AD%E5%BF%83/u4939.svg" />
                <span>@我</span>

            </li>
            <li>
                <!-- 点赞的消息提示 -->
                <van-icon size="26" name="good-job-o" />
                <span>被赞</span>

            </li>
            <li>
                <!-- 粉丝的消息提示 -->
                <van-icon size="26" name="contact-o" />
                <span>粉丝</span>

            </li>

        </ul>
        <ul class="mes-list">
            <li v-for="item in state.mesList" :key="item.id" @click="$router.push('/detail')">
                <!-- 第一条消息 -->
                <van-image round :src='item.img' fit="cover" />
                <div class="mes-content">
                    <p class="mes-name">{{ item.name }}</p>
                    <p class="mes-con">{{ item.content }}</p>
                </div>
                <span>{{ item.time }}</span>

            </li>
        </ul>


    </div>
</template>
<style lang="scss" scoped>
.mes-list {
    padding: 0 0.2rem;

    li {

        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0.2rem 0;
    }

    span,
    .mes-con {
        color: gray;
    }

    span {
        align-self: flex-start;
        width: 0.8rem;
        text-align: end;
    }

    .mes-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-content: ;
        width: 2.5rem;
        margin-left: 0.1rem;
        height: 60px;

        .mes-name {
            font-size: 0.16rem;
        }

        p {
            width: 100%;
        }
    }
}

.mes-box {
    font-size: 0.12rem;
    flex: 1;
}

header {
    font-size: 0.20rem;
    text-align: center;
    margin: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;

    span {
        user-select: none;
    }

}

.mes-nav {
    display: flex;
    justify-content: space-around;
    text-align: center;
    line-height: 0.4rem;

    li {
        display: flex;
        flex-direction: column;
    }
}
</style>